import React, { useState, FC, memo } from 'react';
import { Tabs } from 'antd';
import styles from './index.less';
import RealTimeAlarmTable from '@/pages/Alarm/components/RealTimeAlarm/components/AlarmTable';
import HistoryAlarmTable from '@/pages/Alarm/components/HistoryAlarm/components/AlarmTable';
import useHoxModel from '../../../../useHoxModel';

const { TabPane } = Tabs;

const alarmTypeName = {
  REAL_TIME_ALARM: '实时告警',
  HISTORY_AKARM: '历史告警',
};

const AlarmForm: FC<{ id?: number }> = ({ id }) => {
  const [activeTab, setActiveTab] = useState<string>('REAL_TIME_ALARM');
  const { getHisAlarmListByDoor, info, getAlarmListByDoor } = useHoxModel(() => []);

  const tabsChange: (activeKey: string) => void = (activeKey: string) => {
    setActiveTab(activeKey);
  };
  return (
    <div className={styles['card-container']}>
      <div className={styles['tabs-wrap']}>
        <Tabs defaultActiveKey={activeTab} onChange={tabsChange}>
          <TabPane tab="实时告警" key="REAL_TIME_ALARM">
            <RealTimeAlarmTable id={id || info?.id} getRunAlarm={getAlarmListByDoor} />
          </TabPane>
          <TabPane tab="历史告警" key="HISTORY_AKARM">
            <HistoryAlarmTable id={id || info?.id} getHisAlarm={getHisAlarmListByDoor} />
          </TabPane>
        </Tabs>
        <span className={styles['title']}>{alarmTypeName[activeTab]}</span>
      </div>
    </div>
  );
};

export default memo(AlarmForm);
